<template>
  <el-form ref="formRef" :model="form" :rules="formRules">
    <el-row>
      <el-col :span="24">
        <el-form-item prop="content">
          <jcx-code-editor style="width: 100%" :mode="getMode()" :height="800"
                           v-model="form.content"></jcx-code-editor>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import {reactive, ref} from "vue";

const props = defineProps({
  form: {
    type: Object,
    default: {}
  }
});
const formRef = ref(null);
const formRules = reactive({
  content: [{required: true, message: "模板内容为必填项", trigger: "blur"}],
});

const getMode = () => {
  switch (props.form.type) {
    case "Java":
      return "text/x-java";
    case "Vue":
      return "vue";
    case "JavaScript":
      return "javascript";
    case "SQL":
      return "sql";
    case "Xml":
      return "xml";
    default:
      return "javascript";
  }
}

const getFormRef = () => {
  return formRef.value;
}

defineExpose({getFormRef});

</script>